<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Select 选择框 | Vue组件库</title>
    <meta name="description" content="">
    <meta name="generator" content="VuePress 1.5.0">
    <link rel="icon" href="/ant-vue/assets/logo.png">
    <link rel="stylesheet" href="/ant-vue/css/style.css">
    <meta name="description" content="">
    <link rel="preload" href="/ant-vue/assets/css/0.styles.2ba61d87.css" as="style"><link rel="preload" href="/ant-vue/assets/js/app.feae463b.js" as="script"><link rel="preload" href="/ant-vue/assets/js/2.3106f7d0.js" as="script"><link rel="preload" href="/ant-vue/assets/js/94.104c633e.js" as="script"><link rel="preload" href="/ant-vue/assets/js/62.a0624911.js" as="script"><link rel="preload" href="/ant-vue/assets/js/63.62cdd7d2.js" as="script"><link rel="preload" href="/ant-vue/assets/js/64.b03a0487.js" as="script"><link rel="preload" href="/ant-vue/assets/js/65.45601906.js" as="script"><link rel="preload" href="/ant-vue/assets/js/66.cd15b533.js" as="script"><link rel="preload" href="/ant-vue/assets/js/67.d3a0135c.js" as="script"><link rel="prefetch" href="/ant-vue/assets/js/10.fcb610d3.js"><link rel="prefetch" href="/ant-vue/assets/js/100.69b9b0f1.js"><link rel="prefetch" href="/ant-vue/assets/js/101.5e76b024.js"><link rel="prefetch" href="/ant-vue/assets/js/102.259a6d30.js"><link rel="prefetch" href="/ant-vue/assets/js/103.d7208653.js"><link rel="prefetch" href="/ant-vue/assets/js/104.48be3455.js"><link rel="prefetch" href="/ant-vue/assets/js/105.44de38d1.js"><link rel="prefetch" href="/ant-vue/assets/js/106.9485e296.js"><link rel="prefetch" href="/ant-vue/assets/js/107.65fb12ef.js"><link rel="prefetch" href="/ant-vue/assets/js/108.d8df1e9d.js"><link rel="prefetch" href="/ant-vue/assets/js/109.fc7068bb.js"><link rel="prefetch" href="/ant-vue/assets/js/11.a6f7a3fd.js"><link rel="prefetch" href="/ant-vue/assets/js/110.02ef4b4c.js"><link rel="prefetch" href="/ant-vue/assets/js/111.4b6b4237.js"><link rel="prefetch" href="/ant-vue/assets/js/112.4ef1140e.js"><link rel="prefetch" href="/ant-vue/assets/js/113.f8e81e82.js"><link rel="prefetch" href="/ant-vue/assets/js/114.b1e8753a.js"><link rel="prefetch" href="/ant-vue/assets/js/115.b688a8a4.js"><link rel="prefetch" href="/ant-vue/assets/js/116.13b91127.js"><link rel="prefetch" href="/ant-vue/assets/js/117.81b94e0e.js"><link rel="prefetch" href="/ant-vue/assets/js/118.5ffc1982.js"><link rel="prefetch" href="/ant-vue/assets/js/119.f70ca514.js"><link rel="prefetch" href="/ant-vue/assets/js/12.691490ec.js"><link rel="prefetch" href="/ant-vue/assets/js/13.1932f397.js"><link rel="prefetch" href="/ant-vue/assets/js/14.106cfc57.js"><link rel="prefetch" href="/ant-vue/assets/js/15.4b37141e.js"><link rel="prefetch" href="/ant-vue/assets/js/16.91e0d7ac.js"><link rel="prefetch" href="/ant-vue/assets/js/17.09243d51.js"><link rel="prefetch" href="/ant-vue/assets/js/18.09653254.js"><link rel="prefetch" href="/ant-vue/assets/js/19.fde773b2.js"><link rel="prefetch" href="/ant-vue/assets/js/20.6ad25552.js"><link rel="prefetch" href="/ant-vue/assets/js/21.b505ad76.js"><link rel="prefetch" href="/ant-vue/assets/js/22.fac0194b.js"><link rel="prefetch" href="/ant-vue/assets/js/23.65990f54.js"><link rel="prefetch" href="/ant-vue/assets/js/24.1773f708.js"><link rel="prefetch" href="/ant-vue/assets/js/25.27e04dfb.js"><link rel="prefetch" href="/ant-vue/assets/js/26.51383914.js"><link rel="prefetch" href="/ant-vue/assets/js/27.62ebcdf1.js"><link rel="prefetch" href="/ant-vue/assets/js/28.13853669.js"><link rel="prefetch" href="/ant-vue/assets/js/29.8bcd90d9.js"><link rel="prefetch" href="/ant-vue/assets/js/3.1db89034.js"><link rel="prefetch" href="/ant-vue/assets/js/30.6f3d70d7.js"><link rel="prefetch" href="/ant-vue/assets/js/31.f1f893a9.js"><link rel="prefetch" href="/ant-vue/assets/js/32.6a57d8b6.js"><link rel="prefetch" href="/ant-vue/assets/js/33.69ad53b1.js"><link rel="prefetch" href="/ant-vue/assets/js/34.81487e18.js"><link rel="prefetch" href="/ant-vue/assets/js/35.8df52c9b.js"><link rel="prefetch" href="/ant-vue/assets/js/36.9ba45664.js"><link rel="prefetch" href="/ant-vue/assets/js/37.4cc172aa.js"><link rel="prefetch" href="/ant-vue/assets/js/38.99f4f913.js"><link rel="prefetch" href="/ant-vue/assets/js/39.a7766730.js"><link rel="prefetch" href="/ant-vue/assets/js/4.cb18bf47.js"><link rel="prefetch" href="/ant-vue/assets/js/40.1f91d644.js"><link rel="prefetch" href="/ant-vue/assets/js/41.bc3ed068.js"><link rel="prefetch" href="/ant-vue/assets/js/42.799b0238.js"><link rel="prefetch" href="/ant-vue/assets/js/43.3e09c1da.js"><link rel="prefetch" href="/ant-vue/assets/js/44.5f5e0fb0.js"><link rel="prefetch" href="/ant-vue/assets/js/45.19885da5.js"><link rel="prefetch" href="/ant-vue/assets/js/46.7367ff4a.js"><link rel="prefetch" href="/ant-vue/assets/js/47.153e7f66.js"><link rel="prefetch" href="/ant-vue/assets/js/48.e9ac1699.js"><link rel="prefetch" href="/ant-vue/assets/js/49.c43a910c.js"><link rel="prefetch" href="/ant-vue/assets/js/5.d99ae7ec.js"><link rel="prefetch" href="/ant-vue/assets/js/50.cb8d7803.js"><link rel="prefetch" href="/ant-vue/assets/js/51.c7b3f51d.js"><link rel="prefetch" href="/ant-vue/assets/js/52.f2ebf396.js"><link rel="prefetch" href="/ant-vue/assets/js/53.778a71c1.js"><link rel="prefetch" href="/ant-vue/assets/js/54.a5951c5b.js"><link rel="prefetch" href="/ant-vue/assets/js/55.8a2d980f.js"><link rel="prefetch" href="/ant-vue/assets/js/56.e595b056.js"><link rel="prefetch" href="/ant-vue/assets/js/57.d34c6203.js"><link rel="prefetch" href="/ant-vue/assets/js/58.f06d0229.js"><link rel="prefetch" href="/ant-vue/assets/js/59.663f85a9.js"><link rel="prefetch" href="/ant-vue/assets/js/6.83a838f3.js"><link rel="prefetch" href="/ant-vue/assets/js/60.cbdfc110.js"><link rel="prefetch" href="/ant-vue/assets/js/61.b62a94e3.js"><link rel="prefetch" href="/ant-vue/assets/js/68.5ac6c634.js"><link rel="prefetch" href="/ant-vue/assets/js/69.5dafe1b0.js"><link rel="prefetch" href="/ant-vue/assets/js/7.43e4a78c.js"><link rel="prefetch" href="/ant-vue/assets/js/70.5e8ebc5c.js"><link rel="prefetch" href="/ant-vue/assets/js/71.d8fe1559.js"><link rel="prefetch" href="/ant-vue/assets/js/72.9e21be74.js"><link rel="prefetch" href="/ant-vue/assets/js/73.beb41172.js"><link rel="prefetch" href="/ant-vue/assets/js/74.623b7e4f.js"><link rel="prefetch" href="/ant-vue/assets/js/75.e75f2c31.js"><link rel="prefetch" href="/ant-vue/assets/js/76.f731394c.js"><link rel="prefetch" href="/ant-vue/assets/js/77.b4328ac9.js"><link rel="prefetch" href="/ant-vue/assets/js/78.a803a552.js"><link rel="prefetch" href="/ant-vue/assets/js/79.a7b30303.js"><link rel="prefetch" href="/ant-vue/assets/js/8.4fadf24d.js"><link rel="prefetch" href="/ant-vue/assets/js/80.6fb19496.js"><link rel="prefetch" href="/ant-vue/assets/js/81.6b9575bc.js"><link rel="prefetch" href="/ant-vue/assets/js/82.deaa7900.js"><link rel="prefetch" href="/ant-vue/assets/js/83.1bf56d0c.js"><link rel="prefetch" href="/ant-vue/assets/js/84.e3d8d068.js"><link rel="prefetch" href="/ant-vue/assets/js/85.87ea3241.js"><link rel="prefetch" href="/ant-vue/assets/js/86.1d33971e.js"><link rel="prefetch" href="/ant-vue/assets/js/87.f30c05af.js"><link rel="prefetch" href="/ant-vue/assets/js/88.489a518f.js"><link rel="prefetch" href="/ant-vue/assets/js/89.a88fc402.js"><link rel="prefetch" href="/ant-vue/assets/js/9.deb4987b.js"><link rel="prefetch" href="/ant-vue/assets/js/90.e4be9b87.js"><link rel="prefetch" href="/ant-vue/assets/js/91.551abb3a.js"><link rel="prefetch" href="/ant-vue/assets/js/92.8bd44307.js"><link rel="prefetch" href="/ant-vue/assets/js/93.4e1e11ae.js"><link rel="prefetch" href="/ant-vue/assets/js/95.16b86086.js"><link rel="prefetch" href="/ant-vue/assets/js/96.e27b45e8.js"><link rel="prefetch" href="/ant-vue/assets/js/97.43600059.js"><link rel="prefetch" href="/ant-vue/assets/js/98.99220f0e.js"><link rel="prefetch" href="/ant-vue/assets/js/99.72fd0ecb.js">
    <link rel="stylesheet" href="/ant-vue/assets/css/0.styles.2ba61d87.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="ant-row"><div class="sidebar-button"><i aria-label="icon: bars" class="anticon anticon-bars"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg></i> <span></span></div> <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a href="/ant-vue/" class="router-link-active no-logo home-link"><!----> <span class="site-name">Vue组件库</span></a> <div class="search-box mobile-search"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div> <div class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><ul role="menu" id="nav" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/ant-vue/" class="router-link-active">
          主页
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item ant-menu-item-selected"><a href="/ant-vue/category/" class="router-link-active">
          组件
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul> <!----></nav></div></div> <!----></header> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/ant-vue/category/" aria-current="page" title="Grid 栅格布局" class="sidebar-link">Grid 栅格布局</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/#展示效果" title="展示效果" class="sidebar-link">展示效果</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/#grid-使用-flex-的方式布局" title="Grid 使用 Flex 的方式布局" class="sidebar-link">Grid 使用 Flex 的方式布局</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-1.html" title="Layout 布局" class="sidebar-link">Layout 布局</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-1.html#典型页面布局" title="典型页面布局" class="sidebar-link">典型页面布局</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-1.html#应用型网站布局" title="应用型网站布局" class="sidebar-link">应用型网站布局</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-1.html#展示类网站布局" title="展示类网站布局" class="sidebar-link">展示类网站布局</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-1.html#固定侧边栏布局" title="固定侧边栏布局" class="sidebar-link">固定侧边栏布局</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-1.html#layout" title="Layout" class="sidebar-link">Layout</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-1.html#layout-sider" title="Layout.Sider" class="sidebar-link">Layout.Sider</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-1.html#事件" title="事件" class="sidebar-link">事件</a></li></ul></li><li><a href="/ant-vue/category/article-2.html" title="Button 按钮" class="sidebar-link">Button 按钮</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-2.html#通用按钮" title="通用按钮" class="sidebar-link">通用按钮</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-2.html#带图标的按钮" title="带图标的按钮" class="sidebar-link">带图标的按钮</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-2.html#按钮的其他形式" title="按钮的其他形式" class="sidebar-link">按钮的其他形式</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-2.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-3.html" title="Icon 图标" class="sidebar-link">Icon 图标</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-3.html#方向性图标" title="方向性图标" class="sidebar-link">方向性图标</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-3.html#提示建议性图标" title="提示建议性图标" class="sidebar-link">提示建议性图标</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-3.html#编辑类图标" title="编辑类图标" class="sidebar-link">编辑类图标</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-3.html#数据类图标" title="数据类图标" class="sidebar-link">数据类图标</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-3.html#品牌和标识" title="品牌和标识" class="sidebar-link">品牌和标识</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-3.html#网站通用图标" title="网站通用图标" class="sidebar-link">网站通用图标</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-3.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-4.html" title="Pagination 分页组件" class="sidebar-link">Pagination 分页组件</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-4.html#简洁的分页" title="简洁的分页" class="sidebar-link">简洁的分页</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-4.html#普通的分页" title="普通的分页" class="sidebar-link">普通的分页</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-4.html#更多分页样式" title="更多分页样式" class="sidebar-link">更多分页样式</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-4.html#设置分页按钮底色以及按钮文字" title="设置分页按钮底色以及按钮文字" class="sidebar-link">设置分页按钮底色以及按钮文字</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-4.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-5.html" title="AutoComplete 自动搜索栏" class="sidebar-link">AutoComplete 自动搜索栏</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-5.html#输入省份信息" title="输入省份信息" class="sidebar-link">输入省份信息</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-5.html#自动补充邮箱后缀" title="自动补充邮箱后缀" class="sidebar-link">自动补充邮箱后缀</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-5.html#搜索框自动完成" title="搜索框自动完成" class="sidebar-link">搜索框自动完成</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-5.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-6.html" title="Menu 导航菜单" class="sidebar-link">Menu 导航菜单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-6.html#顶部导航菜单" title="顶部导航菜单" class="sidebar-link">顶部导航菜单</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-6.html#侧边导航菜单" title="侧边导航菜单" class="sidebar-link">侧边导航菜单</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-6.html#子菜单是弹出的形式。" title="子菜单是弹出的形式。" class="sidebar-link">子菜单是弹出的形式。</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-6.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-7.html" title="Steps 步骤条" class="sidebar-link">Steps 步骤条</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-7.html#简单的步骤条" title="简单的步骤条" class="sidebar-link">简单的步骤条</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-7.html#带有步骤说明的信息" title="带有步骤说明的信息" class="sidebar-link">带有步骤说明的信息</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-7.html#设置图标" title="设置图标" class="sidebar-link">设置图标</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-7.html#通过按钮控制流程显示" title="通过按钮控制流程显示" class="sidebar-link">通过按钮控制流程显示</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-7.html#竖直方向的步骤条" title="竖直方向的步骤条" class="sidebar-link">竖直方向的步骤条</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-7.html#包含步骤点的进度条" title="包含步骤点的进度条" class="sidebar-link">包含步骤点的进度条</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-7.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-8.html" title="FormModel 表单" class="sidebar-link">FormModel 表单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-8.html#简单的表单" title="简单的表单" class="sidebar-link">简单的表单</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-8.html#带表单验证功能" title="带表单验证功能" class="sidebar-link">带表单验证功能</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-8.html#简单的登录框表单" title="简单的登录框表单" class="sidebar-link">简单的登录框表单</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-8.html#带有验证功能的登录框表单" title="带有验证功能的登录框表单" class="sidebar-link">带有验证功能的登录框表单</a></li></ul></li><li><a href="/ant-vue/category/article-9.html" title="Dropdown 下拉菜单" class="sidebar-link">Dropdown 下拉菜单</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-9.html#简单的下拉菜单" title="简单的下拉菜单" class="sidebar-link">简单的下拉菜单</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-9.html#多层级下拉菜单" title="多层级下拉菜单" class="sidebar-link">多层级下拉菜单</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-9.html#菜单的弹出方向" title="菜单的弹出方向" class="sidebar-link">菜单的弹出方向</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-9.html#下拉菜单的触发方式" title="下拉菜单的触发方式" class="sidebar-link">下拉菜单的触发方式</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-9.html#右键菜单" title="右键菜单" class="sidebar-link">右键菜单</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-9.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-10.html" title="Checkbox 多选框" class="sidebar-link">Checkbox 多选框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-10.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-10.html#用数组生成checkbox" title="用数组生成CheckBox" class="sidebar-link">用数组生成CheckBox</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-10.html#搭配布局组件" title="搭配布局组件" class="sidebar-link">搭配布局组件</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-10.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-11.html" title="Radio 单选框" class="sidebar-link">Radio 单选框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-11.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-11.html#api" title="API" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-11.html#radiogroup-事件" title="RadioGroup 事件" class="sidebar-link">RadioGroup 事件</a></li></ul></li><li><a href="/ant-vue/category/article-12.html" aria-current="page" title="Select 选择框" class="active sidebar-link">Select 选择框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-12.html#简单的选择框" title="简单的选择框" class="sidebar-link">简单的选择框</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-12.html#标签" title="标签" class="sidebar-link">标签</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-12.html#获得选项的文本" title="获得选项的文本" class="sidebar-link">获得选项的文本</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-12.html#选择框联动" title="选择框联动" class="sidebar-link">选择框联动</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-12.html#多选" title="多选" class="sidebar-link">多选</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-12.html#带搜索框" title="带搜索框" class="sidebar-link">带搜索框</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-12.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-13.html" title="Slider 滑动输入条" class="sidebar-link">Slider 滑动输入条</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-13.html#基本" title="基本" class="sidebar-link">基本</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-13.html#带输入框的滑块" title="带输入框的滑块" class="sidebar-link">带输入框的滑块</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-13.html#带标签的滑块" title="带标签的滑块" class="sidebar-link">带标签的滑块</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-13.html#垂直方向的-slider" title="垂直方向的 Slider" class="sidebar-link">垂直方向的 Slider</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-13.html#控制-tooltip-的显示" title="控制 ToolTip 的显示" class="sidebar-link">控制 ToolTip 的显示</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-13.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-14.html" title="InputNumber 数字输入框" class="sidebar-link">InputNumber 数字输入框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-14.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-14.html#小数" title="小数" class="sidebar-link">小数</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-14.html#格式化展示" title="格式化展示" class="sidebar-link">格式化展示</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-14.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-15.html" title="Rate 评分" class="sidebar-link">Rate 评分</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-15.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-15.html#文案展现" title="文案展现" class="sidebar-link">文案展现</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-15.html#半星" title="半星" class="sidebar-link">半星</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-15.html#只读" title="只读" class="sidebar-link">只读</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-15.html#其他字符" title="其他字符" class="sidebar-link">其他字符</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-15.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-16.html" title="Carousel 走马灯 / 轮播图" class="sidebar-link">Carousel 走马灯 / 轮播图</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-16.html#基本用法" title="基本用法" class="sidebar-link">基本用法</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-16.html#设置方向" title="设置方向" class="sidebar-link">设置方向</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-16.html#渐显" title="渐显" class="sidebar-link">渐显</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-16.html#自动定时切换" title="自动定时切换" class="sidebar-link">自动定时切换</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-16.html#自定义分页" title="自定义分页" class="sidebar-link">自定义分页</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-16.html#自定义箭头" title="自定义箭头" class="sidebar-link">自定义箭头</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-16.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-17.html" title="Alert 警告提示" class="sidebar-link">Alert 警告提示</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-17.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-17.html#含有辅助性文字介绍" title="含有辅助性文字介绍" class="sidebar-link">含有辅助性文字介绍</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-17.html#可关闭的警告提示" title="可关闭的警告提示" class="sidebar-link">可关闭的警告提示</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-17.html#图标" title="图标" class="sidebar-link">图标</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-17.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-18.html" title="Message 全局提示" class="sidebar-link">Message 全局提示</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-18.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-19.html" title="Modal 对话框" class="sidebar-link">Modal 对话框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-19.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-19.html#确认对话框" title="确认对话框" class="sidebar-link">确认对话框</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-19.html#信息提示" title="信息提示" class="sidebar-link">信息提示</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-19.html#定时关闭" title="定时关闭" class="sidebar-link">定时关闭</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-19.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-20.html" title="Notification 通知提醒框" class="sidebar-link">Notification 通知提醒框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-20.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-20.html#带有图标的通知提醒框" title="带有图标的通知提醒框" class="sidebar-link">带有图标的通知提醒框</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-20.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-21.html" title="Popconfirm 气泡确认框" class="sidebar-link">Popconfirm 气泡确认框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-21.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-21.html#位置" title="位置" class="sidebar-link">位置</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-21.html#api" title="API" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-21.html#事件" title="事件" class="sidebar-link">事件</a></li></ul></li><li><a href="/ant-vue/category/article-22.html" title="Result 结果" class="sidebar-link">Result 结果</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-22.html#成功的结果" title="成功的结果" class="sidebar-link">成功的结果</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-22.html#展示普通的信息处理结果" title="展示普通的信息处理结果" class="sidebar-link">展示普通的信息处理结果</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-22.html#警告类型" title="警告类型" class="sidebar-link">警告类型</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-22.html#错误反馈" title="错误反馈" class="sidebar-link">错误反馈</a></li></ul></li><li><a href="/ant-vue/category/article-23.html" title="Progress 进度条" class="sidebar-link">Progress 进度条</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-23.html#进度条" title="进度条" class="sidebar-link">进度条</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-23.html#进度条动态展示" title="进度条动态展示" class="sidebar-link">进度条动态展示</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-23.html#进度圈" title="进度圈" class="sidebar-link">进度圈</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-23.html#进度圈动态展示" title="进度圈动态展示" class="sidebar-link">进度圈动态展示</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-23.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-24.html" title="Skeleton 骨架图 / 加载占位图" class="sidebar-link">Skeleton 骨架图 / 加载占位图</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-24.html#最简单的占位效果" title="最简单的占位效果" class="sidebar-link">最简单的占位效果</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-24.html#带图标的占位效果" title="带图标的占位效果" class="sidebar-link">带图标的占位效果</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-24.html#显示动画效果" title="显示动画效果" class="sidebar-link">显示动画效果</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-24.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-25.html" title="Collapse 折叠面板" class="sidebar-link">Collapse 折叠面板</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-25.html#普通的折叠面板" title="普通的折叠面板" class="sidebar-link">普通的折叠面板</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-25.html#每次只能打开一个标签页" title="每次只能打开一个标签页" class="sidebar-link">每次只能打开一个标签页</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-25.html#嵌套折叠面板" title="嵌套折叠面板" class="sidebar-link">嵌套折叠面板</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-25.html#自定义面板" title="自定义面板" class="sidebar-link">自定义面板</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-25.html#api" title="API" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-25.html#事件" title="事件" class="sidebar-link">事件</a></li></ul></li><li><a href="/ant-vue/category/article-26.html" title="TabCar 选项卡" class="sidebar-link">TabCar 选项卡</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-26.html#基本用法" title="基本用法" class="sidebar-link">基本用法</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-26.html#带图标的标签页" title="带图标的标签页" class="sidebar-link">带图标的标签页</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-26.html#标签列表的方向" title="标签列表的方向" class="sidebar-link">标签列表的方向</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-26.html#卡片式" title="卡片式" class="sidebar-link">卡片式</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-26.html#新增和关闭标签页" title="新增和关闭标签页" class="sidebar-link">新增和关闭标签页</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-26.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-27.html" title="Tag 标签" class="sidebar-link">Tag 标签</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-27.html#基本使用" title="基本使用" class="sidebar-link">基本使用</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-27.html#多彩标签" title="多彩标签" class="sidebar-link">多彩标签</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-27.html#可选择的标签" title="可选择的标签" class="sidebar-link">可选择的标签</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-27.html#动态添加和删除" title="动态添加和删除" class="sidebar-link">动态添加和删除</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-27.html#api" title="API" class="sidebar-link">API</a></li></ul></li><li><a href="/ant-vue/category/article-28.html" title="Timeline 时间轴" class="sidebar-link">Timeline 时间轴</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-28.html#基本的时间轴" title="基本的时间轴" class="sidebar-link">基本的时间轴</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-28.html#圆圈颜色" title="圆圈颜色" class="sidebar-link">圆圈颜色</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-28.html#自定义时间轴点" title="自定义时间轴点" class="sidebar-link">自定义时间轴点</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-28.html#交替展现" title="交替展现" class="sidebar-link">交替展现</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-28.html#api" title="API" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-28.html#timeline-item" title="Timeline.Item" class="sidebar-link">Timeline.Item</a></li></ul></li><li><a href="/ant-vue/category/article-29.html" title="Tooltip 文字提示气泡框" class="sidebar-link">Tooltip 文字提示气泡框</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-29.html#api" title="API" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-29.html#共同的-api" title="共同的 API" class="sidebar-link">共同的 API</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-29.html#事件" title="事件" class="sidebar-link">事件</a></li></ul></li><li><a href="/ant-vue/category/article-30.html" title="Statistic 统计数值" class="sidebar-link">Statistic 统计数值</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/ant-vue/category/article-30.html#简单展示" title="简单展示" class="sidebar-link">简单展示</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-30.html#通过前缀和后缀添加单位" title="通过前缀和后缀添加单位" class="sidebar-link">通过前缀和后缀添加单位</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-30.html#倒计时组件" title="倒计时组件" class="sidebar-link">倒计时组件</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-30.html#api" title="API" class="sidebar-link">API</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-30.html#statistic" title="Statistic" class="sidebar-link">Statistic</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-30.html#statistic-countdown" title="Statistic.Countdown" class="sidebar-link">Statistic.Countdown</a></li><li class="sidebar-sub-header"><a href="/ant-vue/category/article-30.html#statistic-countdown-事件" title="Statistic.Countdown 事件" class="sidebar-link">Statistic.Countdown 事件</a></li></ul></li></ul></aside> <main class="page"> <div class="theme-antdocs-content content__default"><h1 id="select-选择框"><a href="#select-选择框" class="header-anchor">#</a> Select 选择框</h1> <blockquote><p>弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。<br>
当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。</p></blockquote> <h2 id="简单的选择框"><a href="#简单的选择框" class="header-anchor">#</a> 简单的选择框</h2> <br> <div><div tabIndex="0" class="ant-select ant-select-enabled" style="width:120px;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="30600772-0d19-42c1-ad48-7a368310d74d" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Lucy" class="ant-select-selection-selected-value" style="display:block;opacity:1;">
      Lucy
    </div></div><span unselectable="on" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><i aria-label="icon: down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div></div> <div tabIndex="-1" class="ant-select ant-select-disabled" style="width:120px;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="0e741ef0-0675-4686-e208-fa302fcda36a" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Lucy" class="ant-select-selection-selected-value" style="display:block;opacity:1;">
      Lucy
    </div></div><span unselectable="on" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><i aria-label="icon: down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div></div> <div tabIndex="0" class="ant-select ant-select-enabled ant-select-loading" style="width:120px;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="3cc3a486-44f2-4af8-c8d4-860f30c4a749" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Lucy" class="ant-select-selection-selected-value" style="display:block;opacity:1;">
      Lucy
    </div></div><span unselectable="on" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><i aria-label="icon: loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></i></span></div></div></div> <h2 id="标签"><a href="#标签" class="header-anchor">#</a> 标签</h2> <blockquote><p>tags select，随意输入的内容（scroll the menu）</p></blockquote> <br> <div tabIndex="0" class="ant-select ant-select-enabled" style="width:100%;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="9b0f1d9d-c22d-4403-f0b6-cdb3eefea621" class="ant-select-selection ant-select-selection--multiple"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display:block;user-select:none;webkit-user-select:none;">Tags Mode</div><ul><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input autoComplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div></li></ul></div></div></div> <h2 id="获得选项的文本"><a href="#获得选项的文本" class="header-anchor">#</a> 获得选项的文本</h2> <br> <div tabIndex="0" class="ant-select ant-select-enabled" style="width:120px;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="2fd5a2e2-d1d9-4658-c9f4-3af0130fee55" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Lucy (101)" class="ant-select-selection-selected-value" style="display:block;opacity:1;">
    Lucy (101)
  </div></div><span unselectable="on" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><i aria-label="icon: down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div></div> <h2 id="选择框联动"><a href="#选择框联动" class="header-anchor">#</a> 选择框联动</h2> <br> <div><div tabIndex="0" class="ant-select ant-select-enabled" style="width:120px;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="dfbbbca9-e4c7-4560-856d-75a1e262d0db" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Zhejiang" class="ant-select-selection-selected-value" style="display:block;opacity:1;">
      Zhejiang
    </div></div><span unselectable="on" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><i aria-label="icon: down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div></div> <div tabIndex="0" class="ant-select ant-select-enabled" style="width:120px;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="9f4080d0-ee76-4c75-c50c-6c6627ddd880" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Hangzhou" class="ant-select-selection-selected-value" style="display:block;opacity:1;">
      Hangzhou
    </div></div><span unselectable="on" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><i aria-label="icon: down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div></div></div> <h2 id="多选"><a href="#多选" class="header-anchor">#</a> 多选</h2> <br> <div tabIndex="0" class="ant-select ant-select-enabled" style="width:100%;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="b740e24d-05d2-4a76-b6d0-392c8f7e4574" class="ant-select-selection ant-select-selection--multiple"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display:none;user-select:none;webkit-user-select:none;">Please select</div><ul><li unselectable="on" role="presentation" title="a1" class="ant-select-selection__choice" style="user-select:none;webkit-user-select:none;"><div class="ant-select-selection__choice__content">
    a1
  </div><span class="ant-select-selection__choice__remove"><i aria-label="icon: close" class="anticon anticon-close ant-select-remove-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></li><li unselectable="on" role="presentation" title="b2" class="ant-select-selection__choice" style="user-select:none;webkit-user-select:none;"><div class="ant-select-selection__choice__content">
    b2
  </div><span class="ant-select-selection__choice__remove"><i aria-label="icon: close" class="anticon anticon-close ant-select-remove-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></li><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input autoComplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div></li></ul></div></div></div> <h2 id="带搜索框"><a href="#带搜索框" class="header-anchor">#</a> 带搜索框</h2> <br> <div tabIndex="0" class="ant-select ant-select-enabled" style="width:200px;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="6428d4bb-6317-4e40-9299-aac42063cc27" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display:block;user-select:none;webkit-user-select:none;">Select a person</div><div class="ant-select-search ant-select-search--inline" style="display:none;"><div class="ant-select-search__field__wrap"><input autoComplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div></div></div><span unselectable="on" class="ant-select-arrow" style="user-select:none;webkit-user-select:none;"><i aria-label="icon: down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div></div> <h2 id="api"><a href="#api" class="header-anchor">#</a> API</h2> <blockquote><p>选择器属性</p></blockquote> <table><thead><tr><th style="text-align:left;">参数</th> <th style="text-align:left;">说明</th> <th style="text-align:left;">类型</th> <th style="text-align:left;">默认值</th></tr></thead> <tbody><tr><td style="text-align:left;">allowClear</td> <td style="text-align:left;">支持清除</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">false</td></tr> <tr><td style="text-align:left;">autoClearSearchValue</td> <td style="text-align:left;">是否在选中项后清空搜索框，只在 <code>mode</code> 为 <code>multiple</code> 或 <code>tags</code> 时有效。</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">true</td></tr> <tr><td style="text-align:left;">autoFocus</td> <td style="text-align:left;">默认获取焦点</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">false</td></tr> <tr><td style="text-align:left;">defaultActiveFirstOption</td> <td style="text-align:left;">是否默认高亮第一个选项。</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">true</td></tr> <tr><td style="text-align:left;">defaultValue</td> <td style="text-align:left;">指定默认选中的条目</td> <td style="text-align:left;">string|string[]|number|number[]</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">disabled</td> <td style="text-align:left;">是否禁用</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">false</td></tr> <tr><td style="text-align:left;">dropdownClassName</td> <td style="text-align:left;">下拉菜单的 className 属性</td> <td style="text-align:left;">string</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">dropdownMatchSelectWidth</td> <td style="text-align:left;">下拉菜单和选择器同宽</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">true</td></tr> <tr><td style="text-align:left;">dropdownRender</td> <td style="text-align:left;">自定义下拉框内容</td> <td style="text-align:left;">(menuNode: VNode, props) =&gt; VNode</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">dropdownStyle</td> <td style="text-align:left;">下拉菜单的 style 属性</td> <td style="text-align:left;">object</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">dropdownMenuStyle</td> <td style="text-align:left;">dropdown 菜单自定义样式</td> <td style="text-align:left;">object</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">filterOption</td> <td style="text-align:left;">是否根据输入项进行筛选。当其为一个函数时，会接收 <code>inputValue</code> <code>option</code> 两个参数，当 <code>option</code> 符合筛选条件时，应返回 <code>true</code>，反之则返回 <code>false</code>。</td> <td style="text-align:left;">boolean or function(inputValue, option)</td> <td style="text-align:left;">true</td></tr> <tr><td style="text-align:left;">firstActiveValue</td> <td style="text-align:left;">默认高亮的选项</td> <td style="text-align:left;">string|string[]</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">getPopupContainer</td> <td style="text-align:left;">菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。</td> <td style="text-align:left;">Function(triggerNode)</td> <td style="text-align:left;">() =&gt; document.body</td></tr> <tr><td style="text-align:left;">labelInValue</td> <td style="text-align:left;">是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 <code>string</code> 变为 <code>{key: string, label: vNodes}</code> 的格式</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">false</td></tr> <tr><td style="text-align:left;">maxTagCount</td> <td style="text-align:left;">最多显示多少个 tag</td> <td style="text-align:left;">number</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">maxTagPlaceholder</td> <td style="text-align:left;">隐藏 tag 时显示的内容</td> <td style="text-align:left;">slot/function(omittedValues)</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">maxTagTextLength</td> <td style="text-align:left;">最大显示的 tag 文本长度</td> <td style="text-align:left;">number</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">mode</td> <td style="text-align:left;">设置 Select 的模式为多选或标签</td> <td style="text-align:left;">'default' | 'multiple' | 'tags' | 'combobox'</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">notFoundContent</td> <td style="text-align:left;">当下拉列表为空时显示的内容</td> <td style="text-align:left;">string|slot</td> <td style="text-align:left;">'Not Found'</td></tr> <tr><td style="text-align:left;">optionFilterProp</td> <td style="text-align:left;">搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索</td> <td style="text-align:left;">string</td> <td style="text-align:left;">value</td></tr> <tr><td style="text-align:left;">optionLabelProp</td> <td style="text-align:left;">回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 <code>value</code>。</td> <td style="text-align:left;">string</td> <td style="text-align:left;"><code>children</code> （combobox 模式下为 <code>value</code>）</td></tr> <tr><td style="text-align:left;">placeholder</td> <td style="text-align:left;">选择框默认文字</td> <td style="text-align:left;">string|slot</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">showSearch</td> <td style="text-align:left;">使单选模式可搜索</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">false</td></tr> <tr><td style="text-align:left;">showArrow</td> <td style="text-align:left;">是否显示下拉小箭头</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">true</td></tr> <tr><td style="text-align:left;">size</td> <td style="text-align:left;">选择框大小，可选 <code>large</code> <code>small</code></td> <td style="text-align:left;">string</td> <td style="text-align:left;">default</td></tr> <tr><td style="text-align:left;">suffixIcon</td> <td style="text-align:left;">自定义的选择框后缀图标</td> <td style="text-align:left;">VNode | slot</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">removeIcon</td> <td style="text-align:left;">自定义的多选框清除图标</td> <td style="text-align:left;">VNode | slot</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">clearIcon</td> <td style="text-align:left;">自定义的多选框清空图标</td> <td style="text-align:left;">VNode | slot</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">menuItemSelectedIcon</td> <td style="text-align:left;">自定义当前选中的条目图标</td> <td style="text-align:left;">VNode | slot</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">tokenSeparators</td> <td style="text-align:left;">在 tags 和 multiple 模式下自动分词的分隔符</td> <td style="text-align:left;">string[]</td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">value(v-model)</td> <td style="text-align:left;">指定当前选中的条目</td> <td style="text-align:left;">string|string[]|number|number[]</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">options</td> <td style="text-align:left;">options 数据，如果设置则不需要手动构造 selectOption 节点</td> <td style="text-align:left;">array&lt;{value, label, [disabled, key, title]}&gt;</td> <td style="text-align:left;">[]</td></tr> <tr><td style="text-align:left;">defaultOpen</td> <td style="text-align:left;">是否默认展开下拉菜单</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">-</td></tr> <tr><td style="text-align:left;">open</td> <td style="text-align:left;">是否展开下拉菜单</td> <td style="text-align:left;">boolean</td> <td style="text-align:left;">-</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev"><a href="/ant-vue/category/article-11.html" class="prev"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>
        Radio 单选框
      </a></span> <span class="next"><a href="/ant-vue/category/article-13.html">
        Slider 滑动输入条
        <i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></span></p></div> </main> <!----></div><div class="global-ui"></div></div>
    <script src="/ant-vue/assets/js/app.feae463b.js" defer></script><script src="/ant-vue/assets/js/2.3106f7d0.js" defer></script><script src="/ant-vue/assets/js/94.104c633e.js" defer></script><script src="/ant-vue/assets/js/62.a0624911.js" defer></script><script src="/ant-vue/assets/js/63.62cdd7d2.js" defer></script><script src="/ant-vue/assets/js/64.b03a0487.js" defer></script><script src="/ant-vue/assets/js/65.45601906.js" defer></script><script src="/ant-vue/assets/js/66.cd15b533.js" defer></script><script src="/ant-vue/assets/js/67.d3a0135c.js" defer></script>
  </body>
</html>